<template>
   <div class="gauge-chart">
	   
	   <div style="position: relative;">
		   <div
			   class="chart"
			   ref="gaugeChart"
			   v-chart-resize
		   >
		   </div>
		   <div class="num">
			   {{ data || 0 }}
		   </div>
	   </div>
	   
	   <div class="out-circle circle">
		   
		   <div class="inner-circle circle">
			   {{ title || '标题' }}
		   </div>
	   </div>
   </div>
</template>
<script>
import echarts from "echarts";

export default {
  name: '',
  data() {
    return {
	    chartInstance: null
    }
  },
	props: {
		title: String,
		data: Number,
		min: {
			type: Number,
			default: 0
		},
		max: {
			type: Number,
			default: 200
		}
	},
	mounted() {
		this.initChart()
	},
	methods: {
		initChart() {
			const start = this.data / this.max
			const options = {
				series: [
					{
						type: 'gauge',
						radius: '100%',
						min: this.min,
						max: this.max,
						progress: {
							show: true,
							width: this.fitChartSize(10)
						},
						axisLine: {
							lineStyle: {
								width: this.fitChartSize(10),
								color: [
									[start, '#3764D1'],
									[1, 'rgb(38,43,89)'],
								]
							}
						},
						axisTick: {
							show: false
						},
						splitLine: {
							show: false
						},
						axisLabel: {
							show: false,
						},
						anchor: {
							show: true,
							showAbove: true,
							size: 12,
							itemStyle: {
								borderWidth: 10
							}
						},
						pointer: { // 指针样式
							show: false
						},
						title: {
							show: false
						},
						detail: {
							show: false
						},
						color: ['#3764D1'],
						data: [
							{
								value: this.data
							}
						]
					}
				]
			}
			this.chartInstance = echarts.init(this.$refs.gaugeChart)
			
			this.chartInstance.setOption(options)
		}
	}
}
</script>
<style lang="scss" scoped>
.gauge-chart {
	
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	.chart {
		position: relative;
		width: vw(120);
		height: vw(120);
	}
	
	.num {
		width: vw(82);
		height: vw(82);
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: vw(30);
		color: #fff;
		font-family: electronicFont;
		font-weight: bold;
		border-radius: 50%;
		border: 1px solid #3764D1;
		background: radial-gradient(45% 45% at 50% 50%, #4569D3 0%, rgba(0,31,88,0.6) 100%);
		backdrop-filter: blur(2px);
		z-index: 999;
	}
	
	.out-circle {
		width: vw(210);
		height: vw(43);
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.inner-circle {
		width: vw(161);
		height: vw(26);
		text-align: center;
		font-size: vw(16);
		color: #EAD6D6;
	}
	
	.circle {
		border-radius: 50%;
		box-shadow: inset 0px 0px 8px 0px rgba(255,255,255,0.2);
		background: radial-gradient( 70% 70% at 0% 50%, rgba(15,54,126,0) 0%, rgba(15,54,126,0.3) 99%);
	}
}
</style>